@menu_box_shadow:1px 1px 4px rgba(100, 100, 100, 0.7);
@menu_border_radius: 1px;

@menu_desktop_background_color:@white;
@menu_desktop_items_color:#222222;
@menu_desktop_separator_color:#eeeeee;
@menu_desktop_hover_background_color:rgba(107, 107, 107, 0.87);
@menu_desktop_hover_color:@white;

@menu_dark_background_color:#222222;
@menu_dark_items_color:@white;
@menu_dark_hover_background_color:#FB725C;
@menu_dark_hover_color:@white;

@menu_font_size_standard:12px;
@menu_font_size_bigger:20px;
@menu_font_size_smaller:11px;

@menu_rootdirchooser_width:250px;

/************************/
/* CONTEXT MENU STYLES  */
/************************/
div.menu {
  font-family: @fontReact;
  -webkit-font-smoothing: antialiased;


  position: absolute;
  top: 0;
  left: 0;
  -moz-border-radius:@menu_border_radius;
  border-radius: @menu_border_radius;
  box-shadow : @menu_box_shadow;

  ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: hidden;
  }
  li {
    list-style-position: outside;
    a {
      display: block;
      text-decoration: none;
      cursor: default;
      outline: none;
      font-size: @menu_font_size_standard;
    }
    &.menuTitle{
      display: none;
    }
    &.separator {
      height: 1px;
      padding: 0;
      overflow: hidden;
      display: block;
      font-size: 1px;
    }
  }

  .menuActions {
    position: absolute;
    right: 16px;
    top: 1px;
    text-align: right;
    padding-right: 3px !important;
    margin-top: 5px !important;
    a{
      width: 18px;
      padding: 1px;
      display: inline-block !important;
      filter:alpha(opacity=30);
      opacity: 0.3;
      -moz-opacity:0.3;
      cursor: pointer !important;
      height: 16px;
      &:hover {
        filter:alpha(opacity=100);
        opacity: 1.0;
        -moz-opacity:1.0;
      }
    }

    &.moreActions{
      margin-top: 0 !important;
      z-index: 1;
      span{
        color: #ffffff;
        cursor: pointer;
        width: 16px;
        display: inline-block;
        text-align: left;
        font-size: 1.2em;
        text-shadow: 1px 1px 1px #676767;
      }
    }

    img{
      display: none;
    }

    &.icon-caret-right {
      padding-top: 10px;
      color:rgba(0,0,0,0.53);
    }

  }


  &.desktop {
    width: 14em;
    padding: 0 0 1px;
    background-color: @menu_desktop_background_color;

    span.ajxp_icon_span{
      font-size: 15px;
      padding-right: 16px;
      color: @menu_desktop_items_color;
      opacity: 0.7;
    }

    .invertSelection{
      background-color: @menu_desktop_hover_background_color;
      color: @menu_desktop_hover_color !important;
      span.ajxp_icon_span{
        color: @menu_desktop_hover_color;
        opacity:1;
      }
    }

    li{
      padding: 0;
      overflow-y: hidden;
      &.separator {
        padding: 0;
        height: 0;
        border-bottom: 1px solid @menu_desktop_separator_color;
        margin: 0;
        line-height: 1px !important;
      }
      &.menuAnchorSelected, a:hover{
        .menuActions.icon-caret-right{
          color:@menu_desktop_hover_color !important;
        }
      }
      &.menuAnchorSelected a {
        .invertSelection();
        u{
          .kbd();
          font-size: 1em;
          padding: 0 1px;
          line-height: 22px;
          color:@menu_desktop_items_color;
        }
      }
      a {
        color: @menu_desktop_items_color;
        padding: 12px 16px;
        margin: 0;
        font-size: @menu_font_size_standard;
        line-height: 22px;
        u {
          text-decoration: none;
          display: inline-block;
          border: 1px solid white;
          border-radius: 3px;
        }
        img{
          margin-right: 9px;
          margin-top: -5px;
        }
        &.menu_item_default{
          font-weight: 500 !important;
          span.ajxp_icon_span{
            opacity: 0.8;
          }
        }
        &.disabled {
          opacity: 0.25;
          filter: alpha(opacity=25);
          zoom: 1;
        }
        &.enabled:hover{
          .invertSelection();
          u{
            .kbd();
            font-size: 1em;
            padding: 0 1px;
            line-height: 22px;
            color:@menu_desktop_items_color;
          }
        }
      }
    }

    &.toolbarmenu {
      padding-bottom: 0;
      width: auto;
      /* IE */
      width:expression("150px");
      min-width: 15em;
    }

    &.textual{
      width:7em;
      img {
        margin-right: 6px;
      }
    }

    &.panelHeaderMenu li.menuTitle {
      display: block;
      font-size: @menu_font_size_standard;
      color: @menu_desktop_items_color;
      border-bottom: 1px solid @menu_desktop_separator_color;
      padding: 11px 7px;
      text-align: left;
      background-color: darken(@menu_desktop_background_color, 5%);
    }

    &.home_upload{
      background-color: rgba(255, 255, 255, 0.93);
      width:300px;
      li{
        border-bottom: 1px solid rgba(0, 0, 0, 0.04);
        a{
          font-size:15px;
        }
        &.menuTitle {
          display: block;
          padding: 16px;
          text-align: left;
          background-color: #607D8B;
          color: white;
          font-weight: 500;
        }
      }
    }

  }

  &.menuDetails {
    a{
      line-height: 17px;
      padding: 10px 5px;
    }
    img{
      display: none;
    }
    span.menu_label{
      font-size: @menu_font_size_bigger;
      display: block;
    }

    span.ajxp_icon_span{
      float: left;
      padding: 3px 9px 23px 4px;
      font-size: @menu_font_size_bigger - 2px;
    }

    span.menu_description{
      display: block;
      line-height: 16px;
      font-size: @menu_font_size_smaller;
      color: white;
      padding-top: 8px;
    }

    &.workspacesMenu {
      border-radius: 0;
      left: 0 !important;

      span.ajxp_icon_span{
        display: none;
      }

      span.menu_description{
        display: none;
      }

      span.menu_label{
        margin-top: 0;
      }

      li a{
        padding: 20px 10px 20px 20px;
        line-height: 22px;
      }

      li.menuTitle{
        padding: 20px 14px 10px !important;
      }

      span.letter_badge{
        margin: -6px 13px 0 5px;
        font-size: 1em;
        background-color: #000;
      }
    }


  }

  &.rightAlignMenu{
    width: 180px !important;
    a{
      padding: 8px 5px 7px 20px;
      text-align:right;
      img{
        margin-right: 0;
        margin-left:5px;
        float: right;
      }
    }

    a img, span.ajxp_icon_span {
      margin-right: 0;
      margin-left: 9px;
      display: inline-block;
      float: right;
      margin-top: 2px;
    }

  }

  &.rootDirChooser{

    position:absolute;
    z-index: 1500;
    width: @menu_rootdirchooser_width !important;
    /* IE */
    width:expression("@{menu_rootdirchooser_width}");
    background-color: @menu_dark_background_color;
    box-shadow: none !important;
    -webkit-font-smoothing: antialiased;

    li{
      &.menuTitle {
        color: @menu_dark_items_color;
        padding: 13px 8px 15px;
        text-align: left;
        font-size: @menu_font_size_bigger + 2px;
        text-transform: uppercase;
        display: block;
      }
      &.separator {
        border-top: 1px solid fade(@menu_dark_items_color, 75%);
        line-height: 1px !important;
        height: 0 !important;
        &.menuTitle{
          height: auto !important;
          line-height: 14px !important;
          border-top: none;
          padding-top: 7px !important;
          width: 100%;
        }
      }
    }
    a {
      display: block;
      padding: 8px 5px 8px 6px;
      color: #fff;
      img {
        margin-right:5px;
        border: 0;
      }
      span.ajxp_icon_span{
        display:inline-block;
        padding: 0 16px 30px 10px;
        margin-top: -1px;
        font-size: 1.4em;
      }
      &.disabled img{
        filter: alpha(opacity=30);
        opacity: 0.3;
        -moz-opacity: 0.3
      }
      &:hover, &.hovered {
        background-color: @menu_dark_hover_background_color;
        color: @menu_dark_hover_color;
      }
    }
    span.rootDirTitle
    {
      display: block;
      font-size: 12px;
      font-weight: bold;
      padding-top: 1px;
      padding-left: 5px;
      padding-right: 50px;
      color: #ccc;
      border-bottom: 0 solid #ddd;
      text-align: left;
      font-style: italic;
    }
  }

}
